<template>
	<view :style="{ height: hasHeight ? height + 'rpx' : 'auto' }">
		<view :class="{ statusFixed: isFixed }" :style="[navstyle, { paddingBottom: `${has_safe ? COMMON_VAR.safeAreaInsets_bot : 0}rpx` }]" :id="viewId">
			<slot></slot>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'mybtns',
	props: {
		navstyle: {
			//底部外层包裹的样式
			type: [Object, String],
			default: '',
		},
		has_safe: {
			type: [Boolean],
			default: true,
		},
		isFixed: {
			type: [Boolean],
			default: true,
		},
		hasHeight: {
			type: [Boolean],
			default: true,
		},
		auto_trigger: {
			type: [Boolean],
			default: true,
		},
	},
	watch: {},
	data() {
		return {
			viewId: 'id_' + Math.random().toString(36).substr(2, 16),
			height: 'auto',
			// isFixed: true,
			render: -1,
		};
	},
	created() {
		this.init_pagedata('mybtns');
		// this.init_pagedata('mybtns');
	},
	mounted() {},
	methods: {
		...common,
		init_pagedata_callback() {
			let _this = this;
			if (_this.auto_trigger) {
				_this.ready_init();
			}
		},
		ready_init() {
			let _this = this;
			_this.getStickyH(`#${this.viewId}`);
		},
		// 获取元素距离顶部的高度
		getStickyH(id) {
			var _this = this;
			var query = uni.createSelectorQuery().in(_this);
			query.select(id)
				.boundingClientRect(data => {
					_this.height = _this.pxTorpx(data.height);
					_this.render = 1;
					_this.$emit('setbot', _this.height);
				})
				.exec();
		},
	},
};
</script>

<style lang="scss">
.statusFixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
</style>
